<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/9/18
  Time: 19:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../include/head.jsp">
    <jsp:param name="title" value="创建新租户"/>
</jsp:include>

<jsp:include page="../include/admin_header.jsp"/>

<jsp:include page="../include/admin_sidebar.jsp"/>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title"><spring:message code="label.tenant.add"/></h4>
    </section>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <div class="form-horizontal">
                    <div class="sie-padding-top">
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.create.name"/>:</label>

                            <div class="col-md-7">
                                <input id="name" class="form-control sie-input-border sie-input-uwh"
                                       onblur="ajaxVerifyTenant('tenant_name',this,'<spring:message code="label.tenant.key.cannot.empty"/>','<spring:message code="label.tenant.name.cannot.empty"/>','<spring:message code="label.loading"/>','<spring:message code="label.tenant.key.existing"/>','<spring:message code="label.tenant.name.existing"/>');"/>
                                <span id="userNameTips"></span>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.create.address"/>:</label>

                            <div class="col-md-7">
                                <input id="address" class="form-control sie-input-border sie-input-uwh"/>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.create.contact"/>:</label>

                            <div class="col-md-7">
                                <input id="content" class="form-control sie-input-border sie-input-uwh"/>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.create.phone"/>:</label>

                            <div class="col-md-7">
                                <input id="telephone" class="form-control sie-input-border sie-input-uwh"
                                       onblur=" verifyMobile('<spring:message code="label.tenant.phone.not.available"/>')"/>
                                <span id="phoneTips"></span>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.create.mail"/>:</label>

                            <div class="col-md-7">
                                <input id="mail" class="form-control sie-input-border sie-input-uwh"
                                       onblur="verifyEmail('<spring:message code="label.tenant.please.enter.mail.address"/>','<spring:message code="label.tenant.please.enter.available.mail"/>')"/>
                                <span id="mailTips"></span>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.create.url"/>:</label>

                            <div class="col-md-7">
                                ${url}/partner/<input id="key" class="form-control sie-input-border sie-input-uwh"
                                                      style="width: 100px;margin-right: 0;"
                                                      onblur="ajaxVerifyTenant('tenant_key',this,'<spring:message code="label.tenant.key.cannot.empty"/>','<spring:message code="label.tenant.name.cannot.empty"/>','<spring:message code="label.loading"/>','<spring:message code="label.tenant.key.existing"/>','<spring:message code="label.tenant.name.existing"/>');"/>/login
                                <span id="keyTips"></span>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.create.logo"/>:</label>

                            <div class="col-md-7">
                                <div class="sie-u-avatar">
                                    <%--<img src="/images/avatar.png"/>--%>
                                </div>
                                <div class="progress progress-xs hidden sie-progress-width">
                                    <div class="progress-bar progress-bar-primary progress-bar-striped"
                                         role="progressbar" aria-valuenow="60"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                    </div>
                                </div>
                                <div class="sie-avatar-parent">
                                    <input id="avatar" class="hidden" type="file" name="upload"
                                           accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""/>
                                    <a class="solid-button-gray" href="javascript:;"
                                       style="margin-top: 10px;" onclick="changeClick()"><spring:message code="label.user.browse"/></a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.create.description"/>:</label>

                            <div class="col-md-7">
                                <textarea id="description" rows="5" class="form-control sie-textarea-border"></textarea>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.create.service"/>:</label>

                            <div class="col-md-7">
                                <div id="service" class="sie-flex-box" style="line-height: 15px;">

                                </div>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name"><spring:message code="label.tenant.create.period"/>:</label>

                            <div class="col-md-7">
                                <div class="sie-calendar-parent">
                                    <input type="text" readonly="readonly" class="form-control sie-calendar-input" id="start_time">
                                    <img src="/images/calendar.png" class="sie-calendar-img"/>
                                </div>
                                <scan style="background-color: #aabfcb;display: inline-block;width: 10px;height: 1px;vertical-align: middle;"></scan>
                                <div class="sie-calendar-parent">
                                    <input type="text" readonly="readonly" class="form-control sie-calendar-input" id="end_time">
                                    <img src="/images/calendar.png" class="sie-calendar-img"/>
                                </div>
                                <div style="margin-top: 79px;">
                                    <a id="create_button" class="solid-button-blue" href="javascript:;"
                                       style="margin-right: 30px;"><spring:message code="label.user.save"/></a>
                                    <a class="solid-button-orange" href="javascript:history.back(-1);"><spring:message code="label.user.cancel"/></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <%--</div>--%>
    </section>
</div>
<jsp:include page="../include/foot.jsp"/>
<script src="/js/jquery.ui.widget.js"></script>
<script src="/js/jquery.fileupload.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "/admin/api/v1/service/list",
            type: "get",
            success: function (data) {
                console.log(data);
                $.each(data.data, function (index, service) {
                    var line;
                    if (service.enabled != 0) {
                        line = $("<div class='sie-flex-item item-access'></div>").attr("data-value", service.service_id).append($("<i class='sie-checkbox checked'></i>")).append($("<span></span>").text(service.service_name));
                    }
                    $("#service").append(line);
                });
                serviceBind();
            }
        });

        $('#start_time').datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            startDate:new Date(),
            todayHighlight:true
        }).on("changeDate",function(ev){
            $('#end_time').datepicker('setStartDate',dateFormat(ev.date))
        });

        $('#end_time').datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            todayHighlight:true
        });
        bindDateInputClickEvent();
        $('input[type=file]').fileupload({
            url: '/api/v1/image/upload',
            type: "post",
            dataType: 'json',
            change: function (e, data) {
                if (data.files.length > 1) {
                    alert("Max 1 files are allowed");
                    return false;
                }
            },
            drop: function (e, data) {
                if (data.files.length > 1) {
                    alert("Max 1 files are allowed");
                    return false;
                }
            },
            progressall: function (e, data) {
                console.log("22222222222222222222" + new Date());
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.progress-bar').css(
                        'width',
                        progress + '%'
                );
                $(e.target).parent().siblings("div.progress").removeClass("hidden");
            },
            done: function (e, data) {
                console.log("33333333333333333333333333" + new Date());
                var $input = $(e.target);
                $input.parent().siblings("div.progress").addClass("hidden");
                if (data.result.result != 'SUCCESS') {
                    alert('<spring:message code="label.tenant.upload.file.fail"/>');
                    return;
                }
                $(".sie-u-avatar").html("");
                var name = data.result.name;
                var remove = '<a href="javascript:;" class="sie-btn-remove" onclick="$(this).parent().html(\'\');">&times;</a>';
                var item = '<a href="' + data.result.url + '" target="_blank"><img src="' + data.result.url + '" data-name="' + name + '"/></a>';
                $(".sie-u-avatar").append(remove).append(item);
                console.log(name);
            }
        });
        $("#create_button").click(function () {
            if ($("#name").val() == null || $("#name").val() == "") {
                swal('<spring:message code="label.tenant.name.cannot.empty"/>', "", "error");
                return;
            }
            if ($("#key").val() == null || $("#key").val() == "") {
                swal('<spring:message code="label.tenant.key.cannot.empty"/>', "", "error");
                return;
            }
            if ($("#mail").val() == null || $("#mail").val() == "") {
                swal('<spring:message code="label.user.mail.cannot.empty"/>', "", "error");
                return;
            }

            if ($("#userNameTips").attr("class") == "no") {
                swal('<spring:message code="label.tenant.please.enter.available.name"/>', "", "error");
                return;
            }
            if ($("#keyTips").attr("class") == "no") {
                swal('<spring:message code="label.tenant.please.enter.available.key"/>', "", "error");
                return;
            }
            if ($("#mailTips").attr("class") == "no") {
                swal('<spring:message code="label.tenant.please.enter.available.mail"/>', "", "error");
                return;
            }

            if (!$(".progress").hasClass("hidden")) {
                swal('<spring:message code="label.tenant.wait.upload.img"/>', "", "error");
                return;
            }
            var name;
            if ($(".sie-u-avatar").find("img").length > 0) {
                name = $(".sie-u-avatar").find("img").data("name");
            } else {
                name = '';
            }
            create(name);
        })
    });

    function create(imgName) {
        var serviceArr = [];
        var checked = $(".item-checked");
        $.each(checked,function(i,serviceId){
            serviceArr.push($(serviceId).data("value"));
        });
        var dataParam = JSON.stringify({
            key: $("#key").val(),
            tenantName: $("#name").val(),
            telephone: $("#telephone").val(),
            logoMd5: imgName,
            address: $("#address").val(),
            content: $("#content").val(),
            mail: $("#mail").val(),
            detail: $("#description").val(),
            service: serviceArr,
            startTime: $("#start_time").val(),
            endTime: $("#end_time").val()
        });
        console.log(dataParam);

        BYLoadingToast('<spring:message code="label.loading"/>', function (dtd) {
            $.ajax({
                type: "post",
                url: "/admin/api/v1/tenant/create",
                data: dataParam,
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    dtd.resolve();
                    swal({
                        title: '<spring:message code="label.create.success"/>',
                        text: data.data,
                        type: "success",
                        showCancelButton: false,
                        showConfirmButton: true,
                        confirmButtonText: '<spring:message code="label.admin.confirm"/>',
                        animation: "slide-from-top"
                    }, function () {
                        window.location.replace("/admin/tenant/list#tenantList");
                    });
                },
                fail: function () {
                    swal("Error!", "", "error");
                }
            })
        })
    }

    function serviceBind(){
        $("#service .item-access").bind('click',function(){
            $(this).hasClass('item-checked') ? $(this).removeClass('item-checked') : $(this).addClass('item-checked');
        })
    }
</script>